<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>报表统计</title>
		<%@include file="/WEB-INF/base.jspf"%>
		<script src="/js/datePicker.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				font-size: inherit;
				 -webkit-appearance: none;
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
				-webkit-touch-callout: none;
				box-sizing: border-box; 
			}
			
			 html,
			body {
				font-size: 62.5%!important;
				color: #333;
				background-color: #f5f5f5 !important; 
				margin: 0 auto;
				width: 100%;
				min-height: 100%;
				overflow-x: hidden;
				-webkit-user-select: none;
			} 
			
			body {
				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				-webkit-text-size-adjust: 100%;
				-webkit-overflow-scrolling: touch;
				overflow-scrolling: touch;
			}  body{
				position: relative;
				background-color: #e2e2e28a;
				}  
			#wrapper{
			 left:0;
			 top:0;
			 position: absolute; 
			 width: 100%;
			 padding: 0rem 0.4rem ;
			 }
			#scroller{
				margin-top: 50px;
				display: flex;
				flex-direction: column;
				}
			.div-dl-date{
				float: right;
				padding-right:30px;
				cursor: pointer;
			    color: #fff;	
			    position: absolute;
			    top: 50%;
			    transform: translateY(-50%);
			    font-size: 16px;
			    right: 10px;
			}
			.div-dl-date span{
				 display: flex;
			    -ms-flex-align: center;
			    align-items: center;
			    -ms-flex-pack: end;
			    justify-content: flex-end;
			    font-size: 1.6rem;
			    width: 8rem;
			}
			
			.div-dl-triangle{
				position:absolute;
				right:15px;
				top:50%;
			    width: 0;
			    height: 0;
			    color:#999;
			    border-top: 5px solid;
			    border-right: 5px solid transparent;
			    border-left: 5px solid transparent;
			    pointer-events: none;
			    -webkit-tap-highlight-color: transparent;
			}
			
			.div-dl-dateXq{
				display: none;
				position: absolute;
				z-index:1999;
				right:10px;
				top:40px;
				
			}
			.div-dl-dateXq.active{
				display: block;
				position: absolute;
				z-index:1999;
				right:10px;
				top:40px;
			}
			.div-dl-dateXq:after{
				content:"" ;
				position:absolute;
				top:-5px;
				right:5px;
				z-index:10;
				border-bottom: 5px solid;
			    border-right: 5px solid transparent;
			    border-left: 5px solid transparent;
			}
			.div-date-content{
				position:relative;
				box-sizing: border-box;
   				-webkit-tap-highlight-color: transparent;
   				font-size: 15px;
			    color: #000;
			    background-color: #fff;
			    border-radius: 3px;
			    -webkit-box-shadow: 0 0 2px rgba(0,0,0,.21);
			    box-shadow: 0 0 2px rgba(0,0,0,.21);
			    background: #fff;
			    width: 12rem;
			    padding:0 1rem;
			    overflow: hidden;
			    
			}	
			
			.div-date-select:first-child {
			    border-top: 0;
			    padding-top: 0;
			}
			
			.div-date-select {
    			font-size: 1.6rem;
			    border-top: 1px solid #ddd;
			    height:40px;
			    line-height:40px;
			    text-align: left;	
			}
			
			 .ridio-date-right{
			 	display:none;
			    margin-right: 0.1rem;
			    width: 15px;
			    height: 15px;
			    float: right;
			    margin-top:12px;
			    -webkit-transform: rotate(0deg);
			    -ms-transform: rotate(0deg);
			    transform: rotate(0deg); 
			}
			.ridio-date-right.active{
				display:block;
			}
			.ridio-date-right.active:after{
				content:'';
				top: -2.5px;
			    right: 5px;
			    z-index: 999;
			    width: 7px;
			    height: 14px;
			    border-style: solid;
			    border-width: 0 1.5px 1.5px 0;
			    display: block;
			    border-color: #108ee9;
			    content: " ";
			    -webkit-transform: rotate(45deg);
			    -ms-transform: rotate(45deg);
			    transform: rotate(45deg);
			} 
			.layui-inline{
				background-color: #fff;
				padding:5px 20px;
			}
			.layui-inline input{
				border: none;
				outline: none;
				
			}
			.layui-inline input:first-child{
				width:50%;
				text-align: left;
			}
			.layui-inline input:last-child{
				width:40%;
				text-align: right;
			}
			.layui-inline{
				width:100%;
			}
			.total-container{
				display: flex;
				flex-flow: wrap;
			    justify-content: space-between;
			    margin: 0 0.3rem;
			}
			
			.total-item{
				display: flex;
			    font-size: 0.3rem;
			    margin-bottom: 0.3rem;
			    padding: 0.12rem;
			    background: #fff;
			    color: #999;
			    border-radius: 5px;
			    -ms-flex-align: center;
			    align-items: center;
			    width: 47%;
			}
			.div-list-container{
				position: relative;
    			background-color: #fff;
    			box-sizing: border-box;
			    -webkit-tap-highlight-color: transparent;	
			    margin-top: 1rem;
			}
			.div-list-container ul{
				margin:0;	
			}
			
			.div-list-container ul li{
				position: relative;
			    display: flex;
			    padding-left: 15px;
			    min-height: 44px;
			    background-color: #fff;
			    vertical-align: middle;
			    overflow: hidden;
			    transition: background-color .2s;
			    align-items: center;
			    flex: 1 1;
			    align-self: stretch;
			    padding-right: 15px;
			    overflow: hidden;
			}
			
			.div-list-container ul li:before{
				content: "";
			    position: absolute;
			    background-color: #ddd;
			    display: block;
			    z-index: 1;
			    top: 0;
			    right: auto;
			    bottom: auto;
			    left: 0;
			    width: 100%;
			    height: 1px;
			    transform-origin: 50% 50%;
			    transform: scaleY(.5);
			    font-size: 17px;
			}
			.div-list-container ul li p{
				width:100%;
				margin: 0;
			}
			.div-list-container ul li p span{
			    flex: 1 1;
			    color: #000;
			    font-size: 17px;
			}
			.div-list-container ul li p span.help{
				 margin-left: 0.12rem; 
			    display: inline-block;
			    border: 1px solid red;
			    text-align: center;
			    color: red;
			    width:16px;
			    height: 16px;
			    line-height: 16px;
			    border-radius: 50%;
			    font-size: 14px;	
			    touch-action: pan-y;
			    user-select: none;
			    -webkit-user-drag: none;
			    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			   /*  padding-left: 3px; */
			}
			
			.div-list-container ul li p span.money{
				float: right;
				color: #888;
			}
			
			#demo1{
				width: 30%;
				height: 40px;
				display:inline-block;
				font-size: 16px;
				border:none;
				outline:none;
				border-radius: 5px;
				 margin: 5px 3% 0 3%; 
				padding: 5px;
				text-align: center;
			}
			
			#demo2{
				width: 30%;
				height: 40px;
				display:inline-block;
				font-size: 16px;
				border:none;
				outline:none;
				text-align: center;
				border-radius: 5px;
				 margin: 5px 3% 0 3%; 
				padding: 5px;
			}
			
			.btn_search{
				display:inline;
    			color: #fff;
    			background-color:#059BF3;
				padding: 0 15px;
				padding-top:1px;
				height: 40px;
				line-height:40px;
				border-radius: 5px;
				border: none;
				outline: none; 
			}
			#tips{
				padding:5px 12px;
				color: red;
				display: none;
			}
			.date-content-header{
				font-size: 1.4rem;
			    -ms-flex: 1 1;
			    flex: 1 1;
			    -ms-flex-align: center;
			    align-items: center;
			    background: #fff;
			}
			#demo1{
				width: 30%;
				height: 40px;
				display:inline-block;
				font-size: 16px;
				border:none;
				outline:none;
				border-radius: 5px;
				 margin:  0 3%; 
				padding: 5px;
				text-align: center;
				color: #888;
			}
			#demo2{
				width: 30%;
				height: 40px;
				display:inline-block;
				font-size:16px;
				border:none;
				outline:none;
				text-align: center;
				border-radius: 5px;
				 margin: 0 3%; 
				padding: 5px;
				color: #888;
			}
			
			.btn_search{
				display:inline;
    			color: #fff;
			    background-color: #3180eb;
			    font-size: 1.6rem;
			    padding: 0 .8rem;
			    border-radius: 5px;
			    height:2.6rem;
			    line-height:2.6rem;
			    padding-top:1px;
				border: none;
				outline: none; 
			}
		</style>
	</head>

	<body>
		<div class="col-xs-12 col-sm-4 col-sm-offset-4 text-center" style="color:white;background: #059BF3;height: 50px;line-height:50px;position: fixed;margin-top: 0px;left: 0px;z-index: 100;padding-left:0;padding-right:0;">
			<a onclick="back()" class="glyphicon glyphicon-chevron-left fl" style="cursor:pointer; color: white;position:absolute;top:50%;transform:translateY(-50%);font-size: 20px;left:10px;"></a>
			<strong style="font-size: 20px;">团队报表</strong>
			 <div class="div-dl-date">
				<span>今天</span>
				<div class="div-dl-triangle"></div>
			</div>
			 <div class="div-dl-dateXq" id="dateXq">
				<div class="div-date-content">
			 		<div class="div-date-inner">
			 			<div class="div-date-select">
			 				<span>今天</span>
			 				 <div class="ridio-date-right active"></div> 
			 			</div>
			 			<div class="div-date-select">
			 				<span>昨天</span>
			 				 <div class="ridio-date-right"></div>
			 			</div>
			 			<div class="div-date-select">
			 				<span>一周</span>
			 				 <div class="ridio-date-right"></div>
			 			</div>
			 			<div class="div-date-select">
			 				<span>半个月</span>
			 			 	<div class="ridio-date-right"></div>
			 			</div>
			 		</div>
			 	</div>
			</div> 
		</div>
		 <div id="scroller"  class="col-xs-12 col-sm-4 col-sm-offset-4" style="background-color: #e2e2e28a;padding:0;">
		 	<div id="tips"></div>
		 	<div class="date-content-header">
			 	<input id="demo1" type="text" readonly="" name="input_date" placeholder="开始时间" data-lcalendar="2011-01-1,2019-12-31" />
			 	<span>至</span>
			 	<input id="demo2" type="text" readonly="" name="input_date" placeholder="结束时间" data-lcalendar="2011-01-1,2019-12-31" />
			 	<button class="btn_search">搜索</button>
			</div>
			
			<div class="div-list-container">
			<ul>
				<li class="li-list-item">
					<p>
						<span>盈利总额</span>
						<span class="help">？</span>
						<span class="money" id="Yl_money">0元</span>
					</p>
				</li>
				
				<li class="li-list-item">
					<p>
						<span>有效投注总额</span>
						<span class="money" id="Tz_money">0元</span>
					</p>
				</li>
				
				<li class="li-list-item">
					<p>
						<span>派奖总额</span>
						<span class="money" id="Pj_money">0元</span>
					</p>
				</li>
				
				<!-- <li class="li-list-item">
					<p>
						<span>佣金总额</span>
						<span class=money>0元</span>
					</p>
				</li> -->
				
				<li class="li-list-item">
					<p>
						<span>充值总额</span>
						<span class="money" id="Cz_money">0元</span>
					</p>
				</li>
				
				<li class="li-list-item">
					<p>
						<span>提款总额</span>
						<span class="money" id="Tk_money">0元</span>
					</p>
				</li>
			
				<!-- <li class="li-list-item">
					<p>
						<span>返点总额</span>
						<span class=money>0元</span>
					</p>
				</li>
				
				<li class="li-list-item">
					<p>
						<span>优惠总额</span>
						<span class=money>0元</span>
					</p>
				</li> -->
			</ul>
		</div>
		
		<div class="modal-div-fakeModal" id="div-i-noticeGenDan">
	<div class="div-c-modalContent">
		<h3 class="fakemodal-title"></h3>
		<div class="fakemodal-content"></div>
		<div class="fakemodal-btnsGroup"><button class="btn btn-default btn-class-closeFakeModal">关闭</button></div>
	</div>
</div>
	</div>
		
	<div class="modal fade" id="kefuModal1" role="dialog" aria-labelledby="kefuModal" aria-hidden="true">
	    <div class="modal-dialog" style="max-width:300px;margin:0 auto;position: absolute;top:50%;left:44%;margin-left: -90px;">
	        <div class="modal-content">
	            <div class="modal-header">
	                <h4 class="modal-title" style="text-align: center;" id="myModalLabel">温馨提示！</h4>
	            </div>
	            <div class="modal-body" style="padding-bottom:0;">
	            	<div class="div-c-chooseChatWrapper" data-type="kefu">
	            		<div style="font-size: 13px;">盈利总额：投注总额-派奖总额</div>         		
	            	</div>
	            </div>
	            <div class="modal-footer" style="text-align: center;border-top:none;">
	                <button type="button" class="btn btn-default" style="width:70%;" data-dismiss="modal">我知道了</button>
	            </div>
	        </div><!-- /.modal-content -->
	    </div><!-- /.modal-dialog -->
	</div>	
		
		
			
	<script type="text/javascript">
	$(function(){
		$("#demo1").on('click',function(event){
			$('.gearDate').addClass("col-xs-12 col-sm-4 col-sm-offset-4");
		})
		
		$("#demo2").on('click',function(event){
			$('.gearDate').addClass("col-xs-12 col-sm-4 col-sm-offset-4");
		})
	})
	var calendarstart = new datePicker();
	calendarstart.init({
		'trigger': '#demo1', /*按钮选择器，用于触发弹出插件*/
		'type': 'date',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
		'minDate':'1900-1-1',/*最小日期*/
		'maxDate':'2100-12-31',/*最大日期*/
		'onSubmit':function(){/*确认时触发事件*/
			var theSelectData=calendarstart.value;
		},
		'onClose':function(){/*取消时触发事件*/
		}
	});
	
	var calendarend = new datePicker();
	calendarend.init({
		'trigger': '#demo2', /*按钮选择器，用于触发弹出插件*/
		'type': 'date',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
		'minDate':'1900-1-1',/*最小日期*/
		'maxDate':'2100-12-31',/*最大日期*/
		'onSubmit':function(){/*确认时触发事件*/
			var theSelectData=calendarend.value;
		},
		'onClose':function(){/*取消时触发事件*/
		}
	});
			function jianrong() {
				/* 动态设置 html font-size, 使用 rem 适配 */
				var htmlSelector = document.documentElement
				var width = htmlSelector.clientWidth
				if (width > 600) {
					width = 600
				}
				var fSize = width / 7.5
				htmlSelector.style.fontSize = String(fSize) + "px"
				htmlSelector.dataset.fontrem = fSize.toFixed(2)
			}
			jianrong();
			
			
			function baobiao(){
				 $.ajax({
						type:"post",
						url:"/agent/findAllTeamRcord.do",
						data:{
							"startDate":StartDate,
							"endDate":EndDate
						},
						success:function(data){
							var newData=data.data;
							var touzhu= $("#Tz_money").text(newData.cptouzhu+newData.xtctouzhu-newData.cpchedan-newData.xtcchedan+"元");
							var paijiang=$("#Pj_money").text(newData.cppaijiang+newData.xitcpaijiang+"元");
							var chongzhi=$("#Cz_money").text(newData.zxchongzhi+newData.rgjiakuan+"元");
							var tikuan=$("#Tk_money").text(newData.kstikuan+newData.rgkoukuan-newData.tkshibaith+"元");
							var yingli=$("#Yl_money").text(newData.cptouzhu+newData.xtctouzhu-newData.cpchedan-newData.xtcchedan-newData.cppaijiang-newData.xitcpaijiang+"元");
						}
					});
			 }
			
			//点击选择日期类型查询
			 $(".div-dl-date").on("click",function(){
				 if($(this).next().hasClass("active")){
					 $(this).next().removeClass("active")
				 }else{
					 $(this).next().addClass("active") 
				 }
			 })
			 
			
			 
			 function GetDateStr(AddDayCount) { 
				    var dd = new Date(); 
				        dd.setDate(dd.getDate()-AddDayCount);//获取AddDayCount天前的日期 
				        var y = dd.getFullYear(); 
				        var m = dd.getMonth()+1;//获取当前月份的日期 
				        if(m<10){
				        	m="0"+m
				        }
				        var d = dd.getDate();
				        if(d<10){
				        	d="0"+d
				        }
				        return y+"-"+m+"-"+d; 
				} 
			
			 var s1 = GetDateStr(0);
			 $("#demo1").val(s1);
			 $("#demo2").val(s1);
			 var StartDate= $("#demo1").val();
			 var EndDate=$("#demo2").val();
			
			 $(".btn_search").on("click",function(){
					StartDate=$("#demo1").val();
					EndDate=$("#demo2").val();
					if(Number(StartDate.replace(/-/g,""))>Number(EndDate.replace(/-/g,""))){
						$("#tips")[0].style.display="block";
						$("#tips").text("开始时间不能大于结束时间");
					}else{
						$("#tips")[0].style.display="none";
						$("#tips").text("");
						baobiao()
					}
				})
				
				 $(".div-date-inner .div-date-select").on("click",function(){
				 $(this).siblings().children().removeClass("active")
				 $(this).children().addClass("active")
				 $("#dateXq").removeClass("active")
				 $(".div-dl-date span").text($(this).text())
				 if($(this).find("span").text()=="今天"){
					 StartDate=GetDateStr(0)
					 EndDate=GetDateStr(0)
				 }else if($(this).find("span").text()=="昨天"){
					 StartDate=GetDateStr(1)
					 EndDate=GetDateStr(1)
				 }else if($(this).find("span").text()=="一周"){
					 StartDate=GetDateStr(7)
					 EndDate=GetDateStr(0)
				 }else{
					 StartDate=GetDateStr(15)
					 EndDate=GetDateStr(0)
				 }
				 $("#demo1").val(StartDate);
				 $("#demo2").val(EndDate);
				 baobiao()
			 })
			 baobiao()
			 
			 $(".help").on("click",function(){
				 $("#kefuModal1").modal("show");
			 })
			 
			 
			 
			 
			 
			 /*function getIcode(){
				ajax({
					url:"/u/yqm.do",
					success:function(data){
						var json=eval('('+data+')');
						$("#icode").val(json.message);
						$(this).remove()
					}
				});
			}		
			if ("${user.state}" === "2") {
				showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "试玩账号无法进行推广，请注册为正式账号")
			} else {
				getIcode();
			}
	       var clipboard = new ClipboardJS('#copy_btn');      
	       clipboard.on('success', function(e) {      
	           e.clearSelection();      
	       })
	       $("#copy_btn").on(getEndClickEvent(), function() {
	    	   showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "复制成功！")
	       }) */
		</script>
	</body>
</html>